<template>
  <div class="app-container">


    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
<!--      <el-form-item label="" prop="organizationType">-->
<!--        <el-radio-group v-model="queryParams.organizationType" v-if="organizationType === 0 || organizationType === 1" @change="handleQuery">-->
<!--          <el-radio-button :label="4">企业</el-radio-button>-->
<!--          <el-radio-button :label="2">代理</el-radio-button>-->
<!--        </el-radio-group>-->
<!--        <br />-->
<!--      </el-form-item>-->

      <el-form-item label="" prop="auditStatus">
        <el-radio-group v-model="queryParams.auditStatus" @change="handleQuery">
          <el-radio-button :label="3">已合作税源</el-radio-button>
          <el-radio-button :label="0">待审批</el-radio-button>
          <el-radio-button :label="null">未合作税源</el-radio-button>
        </el-radio-group>
      </el-form-item>
      <br />

      <el-form-item label="税源名称" prop="companyName">
        <el-input
          v-model="queryParams.companyName"
          placeholder="请输入税源名称"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-scrollbar class="scrollbar" v-loading="loading" wrap-class="scrollbar-wrapper">
      <el-card v-show="total>0" class="tsl_market_item" v-for="(item,index) in taxList" :key="index" shadow="hover" @click.native="handleDetail(item)">
        <div class="header" v-if="queryParams.auditStatus !== null">
          <el-tag type="info" v-if="item.auditStatus === 0">审批中</el-tag>
          <el-tag v-else-if="item.auditStatus === 1">审批通过</el-tag>
          <el-tag type="warning" v-else-if="item.auditStatus === 4">待税地审核</el-tag>
          <el-popover
            placement="bottom"
            title=""
            width="200"
            trigger="click"
            :content="item.reason">
            <el-tag slot="reference" v-if="item.auditStatus === 2" @click.stop="() => {}" style="cursor: pointer" type="danger">点击查看驳回原因</el-tag>
          </el-popover>
        </div>
        <div class="item" >
          <el-row :gutter="10">
            <el-col :span="8">税源名称：{{item.companyName}}</el-col>
            <el-col :span="8">负责人：{{item.administratorName}}</el-col>
            <el-col :span="8">联系人手机号：{{item.administratorPhone}}</el-col>

            <el-col :span="8">服务费率类型: 统一服务费率</el-col>
            <template v-if="organizationType === 2 || queryParams.organizationType === 2">
<!--              <el-col :span="8" v-if="queryParams.auditStatus === null">税地费率：常规:{{item.conventionRate}}%;特殊:{{item.specialRate}}%</el-col>-->
<!--              <el-col :span="8" v-else-if="queryParams.auditStatus === 0">税地费率：常规:{{item.conventionRate}}%;特殊:{{item.specialRate}}%</el-col>-->
              <el-col :span="8" v-if="queryParams.auditStatus === 3">
                服务费率：常规:{{math(item.conventionRate,item.rate)}}% ;特殊:{{math(item.specialRate,item.rate)}}%</el-col>
            </template>
            <template v-if="organizationType === 4">
              <el-col :span="8" v-if="queryParams.auditStatus === 3">服务费率：{{item.rate}}%</el-col>
            </template>
            <el-col :span="8">计算方式：按实发计算</el-col>

            <el-col :span="8">税源地址：{{item.operateAddress}}</el-col>
            <el-col :span="16">
              <div :class="{ 'text-truncate': !( expandedId===item.organizationId) }" class="introduction" @click.stop="toggleExpand(item.organizationId)" >
                简介：{{ item.companyProfile }}
              </div>
            </el-col>
          </el-row>
        </div>
        <el-button
          size="mini"
          type="text"
          class="contract"
          @click.stop="() => {}"
          icon="el-icon-more-outline"
          @click="handleContract(item)"
          v-hasPermi="['contract:contractInfo:list']"
        >查看合同</el-button>
      </el-card>
      <el-empty v-show="total === 0" description="数据为空"></el-empty>
    </el-scrollbar>
    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />


    <el-drawer :wrapperClosable="false" :close-on-press-escape="false" @close="organization = {}" destroy-on-close title="税源地详情" :visible.sync="detailOpen" size="55%" class="app-drawer" append-to-body>
      <tax-detail @cancel="handleCancel" :organization="organization"></tax-detail>
    </el-drawer>

    <el-drawer :wrapperClosable="false" :close-on-press-escape="false"  title="合同管理" :visible.sync="contractOpen" size="65%" destroy-on-close append-to-body>
      <contract-info v-if="contractOpen" :type="organizationType===2?2:10" :organizationId="contractData.organizationId"></contract-info>
    </el-drawer>
  </div>
</template>

<script>
import store from "@/store";
import { math } from "@/utils/ruoyi";
import {listTaxMarket} from "@/api/tax/taxMarket";
import TaxDetail from "@/views/tax/market/profile/detail.vue";
import ContractInfo from "@/views/contract/contractInfo/index.vue";

export default {
  name: "market",
  components: {ContractInfo, TaxDetail},
  data() {
    return {
      // 遮罩层
      loading: true,
      detailOpen:false,
      contractOpen:false,
      // 显示搜索条件
      showSearch: true,
      organizationId:"",
      organizationType: store.getters.organizationType,
      // 总条数
      total: 0,
      // 合同模板表格数据
      taxList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        companyName: null,
        auditStatus: 3,
        organizationType:null
      },
      contractData:{},
      organization:{},
      // 表单参数
      form: {},
      // 表单校验
      rules: {
      },
      expandedId:"",
    }
  },
  created() {
    if (this.organizationType === 0 || this.organizationType === 1){
      this.queryParams.organizationType = 4;
    }
    this.getList()
  },
  methods: {
    math,
    /** 查询合同模板列表 */
    getList() {
      this.loading = true
      listTaxMarket(this.queryParams).then(response => {
        this.taxList = response.rows
        this.total = response.total
        this.loading = false
      })
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm")
      this.handleQuery()
    },
    toggleExpand(val) {
      if (this.expandedId === val){
        this.expandedId = 0
      }else {
        this.expandedId = val
      }
    },
    handleCancel(val){
      if(val){
        this.getList()
      }
      this.detailOpen = false
    },
    handleDetail(item){
      let data = {...item}
      if (this.queryParams.auditStatus === null){
        data.auditStatus = null
      }
      this.organization = data
      this.detailOpen = true
    },
    handleContract(row){
      this.contractData.organizationId = row.acceptOrganizationId
      this.contractOpen = true
    }
  }
}
</script>

<style scoped lang="scss">
.scrollbar {
  ::v-deep .scrollbar-wrapper {
    overflow-x: hidden !important;
  }
  .tsl_market_item{
    cursor: pointer;
    position: relative;
    margin-bottom: 10px;
    .header{
      gap: 10px;
      display: flex;
      margin-bottom: 8px;
      align-items: center;
    }
    .item{
      font-size: 14px;
      line-height: 35px;
      .text-truncate {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
      .introduction{
        cursor: pointer;
      }
    }
  }
  .contract{
    position: absolute;
    right: 15px;
    top: calc(100% / 2 - 5px);
  }
}
</style>
